<script setup>
import {
  dataSourceTypeOptions,
  methodTypeOptions,
} from '@/schema/config/options'
import useComponentConfig from '@/schema/hooks/use-component-config'

const schema = defineModel('schema')
const currentItem = defineModel('currentItem')

const { componentPropsMap } = useComponentConfig()

const currentItemProps = computed(() => {
  return componentPropsMap[currentItem.value?.type] ?? {}
})

const removeDataItem = index => {
  currentItem.value?.dataSource?.data?.splice(index, 1)
}
const addDataItem = () => {
  currentItem.value?.dataSource?.data?.push({
    value: '',
    label: '',
  })
}
const removeParamsItem = index => {
  currentItem.value?.dataSource?.params?.splice(index, 1)
}
const addParamsItem = () => {
  currentItem.value?.dataSource?.params?.push({
    key: '',
    value: '',
  })
}

const activeNames = ref(['componentItem', 'dataSource'])

// 通用组件配置
defineOptions({ name: 'ComponentConfig' })
</script>

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      title="组件属性"
      name="componentItem"
    >
      <el-form
        v-if="currentItem.props"
        :model="currentItem.props"
      >
        <el-form-item
          v-for="currentProp of currentItemProps"
          :key="currentProp.field"
          :label="currentProp.label"
        >
          <component
            :is="currentProp.component"
            v-model="currentItem.props[currentProp.field]"
            v-bind="currentProp.props"
          ></component>
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item
      title="数据来源"
      name="dataSource"
    >
      <el-form
        v-if="currentItem.dataSource"
        :model="currentItem.dataSource"
      >
        <el-form-item label="数据源">
          <el-segmented
            v-model="currentItem.dataSource.type"
            :options="dataSourceTypeOptions"
          />
        </el-form-item>
        <template v-if="currentItem.dataSource.type === 'local'">
          <el-form-item label="数据项">
            <div
              v-for="(dataItem, dataIndex) of currentItem.dataSource.data"
              :key="dataItem.value"
              class="flex flex-items-center gap-2 mb-1"
            >
              <el-input
                v-model="dataItem.value"
                placeholder="value"
              />
              <el-input
                v-model="dataItem.label"
                placeholder="label"
              />
              <el-button
                circle
                type="danger"
                icon="Delete"
                plain
                @click="removeDataItem(dataIndex)"
              ></el-button>
            </div>
            <el-button
              type="primary"
              icon="Plus"
              plain
              @click="addDataItem"
            >
              添加数据项
            </el-button>
          </el-form-item>
        </template>
        <template v-if="currentItem.dataSource.type === 'remote'">
          <el-form-item label="请求地址">
            <el-input v-model="currentItem.dataSource.url">
              <template #prepend>https://</template>
            </el-input>
          </el-form-item>
          <el-form-item label="请求方法">
            <el-segmented
              v-model="currentItem.dataSource.method"
              :options="methodTypeOptions"
            />
          </el-form-item>
          <el-form-item label="请求参数">
            <div
              v-for="(dataItem, dataIndex) of currentItem.dataSource.params"
              :key="dataIndex"
              class="flex flex-items-center gap-2 mb-1"
            >
              <el-input
                v-model="dataItem.key"
                placeholder="key"
              />
              <el-input
                v-model="dataItem.value"
                placeholder="value"
              />
              <el-button
                circle
                type="danger"
                icon="Delete"
                plain
                @click="removeParamsItem(dataIndex)"
              ></el-button>
            </div>
            <el-button
              type="primary"
              icon="Plus"
              plain
              @click="addParamsItem"
            >
              添加参数
            </el-button>
          </el-form-item>
          <el-form-item label="取值字段">
            <el-input v-model="currentItem.dataSource.resultKey" />
          </el-form-item>
        </template>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>
